﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkout.aspx.cs" Inherits="Golf.WebUI.Checkout" %>

<%@ Register Src="~/UserControl/Header.ascx" TagName="Header" TagPrefix="UserHeader" %>
<%@ Register Src="~/UserControl/footer.ascx" TagName="Footer" TagPrefix="UserFooter" %>
<%@ Register Src="~/UserControl/ToolbarContainer.ascx" TagName="Toolbal" TagPrefix="UserToolbal" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript">
        /**********Judging whether load jquey***************/
        window.jQuery || document.write('<script src="Script/jquery/jquery-1.4.1.min-vsdoc.js" type="text/javascript"><\/script>');
    </script>

    <script src="Script/jquery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script src="Validator/Script/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="Validator/Script/formValidator-4.1.1.js" type="text/javascript"></script>

    <script src="Validator/Script/formValidatorRegex.js" type="text/javascript"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            var pro_price = "<%=pro_price %>";
            var _Bandcountry = "<%=_country %>";
            var Customer_Email = "<%=Customer_Email %>";
            var _uId = "<%=UserId %>";
            var UT = "<%=UT %>";
            var _sex = "<%=sex %>";
            if (_uId == "-1") {
                $("#User_Id").val("-1"); //Initialization User_Id
                $("#sbumit_First").val("Submit");
            } else {
                $("#User_Id").val(_uId); ////Initialization User_Id
                $("#sbumit_First").val("Edit");
                if (_sex == "0") {
                    jQuery(".sex").attr("checked", "checked");
                } else {
                    jQuery(".sex1").attr("checked", "checked");
                }
            }
            jQuery.formValidator.initConfig({ formID: "form2", theme: "SolidBox", submitOnce: true,
                onError: function(msg, obj, errorlist) {
                    alert(msg);
                },
                onSuccess: function() {
                    var sex;
                    if (jQuery(".sex:checked").attr("checked")) {
                        sex = 0;
                    }
                    else {
                        sex = 1;
                    }
                    var firstname = $("#firstname").val();
                    var lastname = $("#lastname").val();
                    var street_address = $("#street_address").val();
                    var city = $("#city").val();
                    var state = $("#state").val();
                    var postcode = $("#postcode").val();
                    var email_address = $("#email_address").val();
                    var telephone = $("#telephone").val();
                    var action = "checkout";
                    var _Country = $("#country option:selected").val();
                    var _address_id = $("#address_id").val();
                    if (_uId != "-1") { action = "Modify" }
                    $.ajax({
                        type: "POST",
                        contentType: "application/x-www-form-urlencoded",
                        url: "checkout.aspx?" + Math.random(),
                        data: {
                            "action": action,
                            "sex": escape(sex),
                            "firstname": escape(firstname),
                            "lastname": escape(lastname),
                            "street_address": escape(street_address),
                            "city": escape(city),
                            "state": escape(state),
                            "postcode": escape(postcode),
                            "_country": escape(_Country),
                            "email_address": escape(email_address),
                            "telephone": escape(telephone),
                            "number": escape(_uId),
                            "addressId": escape(_address_id),
                            "UT": UT
                        },
                        success: function(msg) {
                            var _msg = msg.split('|')[0];
                            var CursMsg = firstname + " " + lastname + "<br/>" + street_address + "<br/>" + city + " " + postcode + "<br/>" + state + "," + _Country;
                            $(".CursMst").html(CursMsg);
                            if (_msg != "-1") {
                                $("#User_Id").val(_msg);
                                $("#address_id").val(msg.split('|')[1]);
                                $("#sbumit_First").val("Edit");
                                _uId = _msg;
                            }
                        },
                        error: function(xhr) {
                            alert(xhr.responseText);
                        }
                    });
                    return false;
                }
            });
            $("#sex").formValidator({ onShow: "Please choose a salutation", onFocus: "Please choose a salutation", onCorrect: "Input the correct" }).inputValidator({ min: 1, max: 1, onError: "Please choose a salutation" }).defaultPassed();
            jQuery("#firstname").formValidator({ onShow: "Please enter the first name！", onFocus: "The firs tname field cannot be empty", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, onError: "The firs tname field cannot be empty" });
            jQuery("#lastname").formValidator({ onShow: "Please enter your last name", onFocus: "Not null!", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, onError: "The last tname field cannot be empty" });
            jQuery("#street_address").formValidator({ onShow: "Please enter your stree address", onFocus: "Not null!", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, onError: "The street_address field cannot be empty" });
            jQuery("#city").formValidator({ onShow: "Please enter your city", onFocus: "Your City must contain a minimum of 2 characters.", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 2, onError: "Your City must contain a minimum of 2 characters." });
            jQuery("#state").formValidator({ onShow: "Please enter your state", onFocus: "Not null!", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 1, onError: "The state field cannot be empty" });
            jQuery("#postcode").formValidator({ onShow: "Please enter your Zip code", onFocus: "Your Post/ZIP Code must contain a minimum of 4 characters.", onCorrect: "Congratulations to you, lose on the!" }).inputValidator({ min: 4, onError: "The postcode field cannot be empty" });
            $("#country").formValidator({ onShow: "Please enter you Country", onFocus: "Not null!", onCorrect: "Input the correct, thank you", defaultValue: "-1" }).inputValidator({ min: 1, onError: "The country field cannot be empty" }).defaultPassed();

            $("#email_address").formValidator({
                onShow: "Please enter your email",
                onFocus: "Mailbox at least 6 characters, a maximum of 100 characters",
                onCorrect: "Congratulations to you, lose on the!",
                defaultValue: "@"
            }).inputValidator({
                min: 6,
                max: 100,
                onError: "You enter the email length illegal, please confirm"
            }).regexValidator({
                regExp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",
                onError: "You enter the mailbox format is not correct"
            });

            $("#telephone").formValidator({ onShow: "Please enter your telephone", onFocus: "Your Telephone Number must contain a minimum of 6 characters.", onCorrect: "Input the correct, thank you" }).inputValidator({ min: 6, onError: "The telephone field cannot be empty!" }).defaultPassed();

            $("#email_address").blur(function() {
                $("#sbumit_First").removeAttr("disabled"); //The button is available
                var thisEmail = $(this).val();
                if (UT == "1") return;
                //Source if it is not registered place an order is not verified ,0 is Registered user if(UT==0){Validation}else{return}
                if (Customer_Email == thisEmail) return false; //Whether change mailbox
                var MsgTip = $("#email_addressTip div");
                if (MsgTip.attr("class") == "onCorrect") {
                    MsgTip.attr("class", "onLoad");
                    MsgTip.html("The ongoing validation……………………");
                    $.ajax({
                        type: "POST",
                        contentType: "application/x-www-form-urlencoded",
                        url: "Checkout.aspx?" + Math.random(),
                        data: {
                            "action": "Valid_email",
                            "email": $("#email_address").val()
                        },
                        success: function(msg) {
                            var _msg = msg.split('|')[0];
                            if (_msg == "no") {
                                MsgTip.attr("class", "onError");
                                MsgTip.html("Already registered Email…………");
                                $("#sbumit_First").attr({ "disabled": "disabled" });
                            }
                            if (_msg == "yes") {
                                Customer_Email = thisEmail;
                                MsgTip.attr("class", "onCorrect");
                                MsgTip.html("Input the correct, thank you");
                                $("#sbumit_First").removeAttr("disabled"); //The button is available
                            }
                        },
                        error: function(xhr) {
                            alert(xhr.responseText);
                            $("#sbumit_First").attr({ "disabled": "disabled" }); //The button atrr is disabled
                        }
                    });
                }
            });

            //order_sub
            $("#order_sub").click(function() {
                if (confirm('\n\nPlease confirm you the delivery address is correct?\n\n')) {
                    var address_id = $("#address_id").val();
                    var User_Id = $("#User_Id").val();
                    var Coupon_Code = $("#txt_Coupon").val();
                    var Certificates_Code = $("#txt_Certificates").val();
                    var txt_Msg = $("#txt_Msg").val();
                    var txt_order = $("#txt_order").val();
                    var Cart_msg = $("#Cart_msg").html();
                    $.ajax({
                        type: "POST",
                        contentType: "application/x-www-form-urlencoded",
                        url: "Checkout.aspx?" + Math.random(),
                        data: {
                            "action": "order_sub",
                            "address_id": escape(address_id),
                            "User_Id": escape(User_Id),
                            "Coupon_Code": escape(Coupon_Code),
                            "Certificates_Code": escape(Certificates_Code),
                            "txt_Msg": escape(txt_Msg),
                            "txt_order": escape(txt_order),
                            "Cart_msg": escape(Cart_msg)
                        },
                        success: function(msg) {
                            var _msg = msg.split(',')[0];
                            if (_msg == "0") {
                                alert("Failure to place an order, please contact customer service online");
                            } else {
                                alert("Place an order successfully, page Sredne………………");
                            }
                        },
                        error: function(xhr) {
                            alert(xhr.responseText);
                        }
                    });
                }
            });

            if (Customer_Email != "") {
                $("#email_address").val(Customer_Email);
            }
            var _save1 = 0; //Certificates money
            var _save2 = 0; //Coupon money
            var _sumPrice = 0;
            $("#Certificates").click(function() {
                //get Certificates money
                var Code1 = $("#txt_Certificates").val(); //get code
                $.ajax({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded",
                    url: "Checkout.aspx?" + Math.random(),
                    data: {
                        "action": "get_Certificates",
                        "Certificates_Code": escape(Code1)
                    },
                    success: function(msg) {
                        _save1 = msg.split('|')[0];
                        $("#_Certificates").val(_save1);
                        _sumPrice = (parseFloat(pro_price) - parseFloat(_save1) - parseFloat(_save2));
                        $(".order_total").html("$:" + _sumPrice);
                    },
                    error: function(xhr) {
                        _save1 = 0;
                        alert(xhr.responseText);
                    }
                });
            });
            $("#Coupon").click(function() {
                //get Coupon    Money
                var Code2 = $("#txt_Coupon").val(); //get code  
                $.ajax({
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded",
                    url: "Checkout.aspx?" + Math.random(),
                    data: {
                        "action": "get_Coupon",
                        "Code_Coupon": escape(Code2)
                    },
                    success: function(msg) {
                        _save2 = msg.split('|')[0];
                        $(".Coupon_Code").html(' Discount Coupon:' + Code2 + ': <span class="price">-$' + _save2 + '</span>').css("height", "25px");

                        $(".Coupon_msg").html('The use of success, to save <span class="price">$' + _save2 + '</span>');
                        $("#_Coupon").val(_save2);
                        _sumPrice = parseFloat(pro_price) - parseFloat(_save1) - parseFloat(_save2);
                        $(".order_total").html("$" + _sumPrice);
                    },
                    error: function(xhr) {
                        _save2 = 0;
                        alert(xhr.responseText);
                    }
                });
            });
            if (_Bandcountry != "") {
                $("#country option[value='" + _Bandcountry + "']").attr("selected", "selected");
            }
        }); 
    </script>

    <style type="text/css">
        #accordion fieldset
        {
            background: #FCFCFC;
            border: solid 1px #ECEAEA;
            padding: 15px 20px 30px 20px;
            color: #494949;
            margin-bottom: 20px !important;
        }
        label.inputLabel
        {
            width: 9em;
            padding-left: 10px;
            margin: 5px 0;
            padding-right: 10px;
        }
        .alert
        {
            font-size: 11px;
            color: #A3A3A3;
            margin-left: 0.5em;
            margin-right: 5px;
            width: 381px;
        }
        /*Text*/#accordion input[type=text], input[type=password], textarea
        {
            height: 23px;
            line-height: 23px;
            font-size: 14px;
            border: solid 1px #666;
            padding-left: 5px;
            padding-right: 6px;
            border-radius: .3em;
            width: 200px;
        }
        /*Global external light style*/#accordion input[type=text]:focus, input[type=password]:focus, textarea:focus
        {
            transition: border linear .2s,box-shadow linear .5s;
            -moz-transition: border linear .2s,-moz-box-shadow linear .5s;
            -webkit-transition: border linear .2s,-webkit-box-shadow linear .5s;
            outline: none;
            border-color: #666;
            box-shadow: 0 0 8px #666;
            -moz-box-shadow: 0 0 8px #666;
            -webkit-box-shadow: 0 0 8px #666;
            border-radius: .3em; /*Set fillet*/
        }
        .style1
        {
            width: 129px;
        }
        .style2
        {
            width: 254px;
        }
        .style3
        {
            width: 288px;
        }
        .style4
        {
            width: 107px;
        }
    </style>
    <style type="text/css">
        .cart_Two
        {
            margin: 10px;
            margin-left: 0px;
            text-align: center;
            width: 420px;
        }
        .__content
        {
            padding: 10px;
            text-align: left;
            font-size: 12px;
            font-weight: 0px;
        }
        .textarea__
        {
            height: 60px;
        }
        input[type=button], .submit, .Edit
        {
            border: 1px solid #ccc;
            background: none;
            padding: 3px;
            padding-left: 7px;
            padding-right: 7px;
            border-radius: .3em;
            cursor: pointer;
            letter-spacing: 0.2em;
            font-weight: bold;
            font-size: 14px;
        }
        .onError, .onSuccess, onFocus
        {
            border-radius: .3em;
        }
        select
        {
            padding: 4px;
            border: 1px solid #ccc;
        }
        option
        {
            border: 0px;
        }
        /*The third step of the shopping cart*/.Cart_H
        {
            line-height: 30px;
            background-color: #eaeAEA;
            text-align: center;
        }
        .pro_Content td
        {
            border: 1px solid #ccc;
            padding: 20px;
        }
        .pro_Content td.Cart_3 span.price, #accordion .price
        {
            color: #b30b12;
            font-size: 1.4em;
            font-weight: bold;
            letter-spacing: -1px;
        }
        ._Clare_
        {
            height: 30px;
            width: 1px;
        }
        div[id$="Tip"]
        {
            height: 20px;
            line-height: 14px;
        }
        div[id$="Tip"] div, .onShow
        {
            border-radius: .5em;
        }
        .onShow
        {
            border: 1px solid #ccc;
            height: 15px;
            line-height: 15px;
        }
        .Coupon_Code
        {
            height: 0px;
        }
    </style>
    <link href="Style/jquery-ui-1.7.custom.css" rel="stylesheet" type="text/css" />

    <script src="Script/common/jquery-ui-1.7.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $('#tabs').tabs();
            $(".Edit").click(function() {
                jQuery("#tabs ul li a.First").click();
            });
            $("#btn_Two").click(function() {
                $("#tabs ul li").removeClass("ui-tabs-selected").removeClass("ui-state-active");
                $("#tabs ul li:eq(2)").addClass("ui-tabs-selected").addClass("ui-state-active");
                $("#Second").addClass(" ui-tabs-hide");
                $("#Third").removeClass(" ui-tabs-hide");
            });
            $("#sbumit_First").click(function() {
                $("#tabs ul li").removeClass("ui-tabs-selected").removeClass("ui-state-active");
                $("#tabs ul li:eq(1)").addClass("ui-tabs-selected").addClass("ui-state-active");
                $("#First").addClass(" ui-tabs-hide");
                $("#Second").removeClass(" ui-tabs-hide");
                //                $("#First").slideUp(500);
                //                $("#Second").slideDown(500);
                //                if ($("#Second").not(":animated")) {
                //                   
                //                }
            });
        });
    </script>

    <script type="text/javascript">
        function SetOptionTitle() {
            var selects = document.getElementsByTagName("select");
            if (selects.length > 0) {
                for (var i = 0; i < selects.length; i++) {
                    var options = selects[i].options;
                    if (selects[i].options.length > 0) {
                        for (var j = 0; j < options.length; j++) {
                            if (options[j].title == "")
                                options[j].title = options[j].text;
                        }
                    }
                }
            }
        }
    </script>

    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24545885-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

    </script>

</head>
<body>
    <form id="form1" runat="server" style="width: 1004px; margin: 0px auto; background-color: White;">
    <UserHeader:Header ID="UserHeader" runat="server" />
    <div id="accordion" style="padding: 10px 15px; background-color: White; width: 954px;
        margin: 0px auto;">
        <input type="hidden" value="-1" id="User_Id" runat="server" />
        <input type="hidden" value="-1" id="address_id" runat="server" />
        <input type="hidden" value="0" id="_Certificates" runat="server" />
        <input type="hidden" value="0" id="_Coupon" runat="server" />
        <input type="hidden" value="0" id="ProSumPrice" runat="server" />
        <form id="form3" style="display: none;">
        </form>
        <div id="tabs">
            <ul>
                <li><a href="#First" class="First">The first step</a></li>
                <li><a href="#Second">Second step</a></li>
                <li><a href="#Third">Third step</a></li>
            </ul>
            <div id="First">
                <div id="0">
                    <div style="font-size: 12px; font-weight: 0px;">
                        <form id="form2">
                        <fieldset>
                            <p>
                                Address Details</p>
                            <table align="left" cellpadding="0" cellspacing="0" style="line-height: 33px;">
                                <tr>
                                    <td class="style1">
                                        <input type="radio" name="gender" class="sex" value="0" id="sex" /><label class="radioButtonLabel"
                                            for="gender-male">Mr.</label>
                                        <input type="radio" name="gender" value="1" class="sex1" id="sex"><label class="radioButtonLabel"
                                            for="gender-female">Ms.</label><span class="alert">*</span>
                                    </td>
                                    <td class="style2">
                                    </td>
                                    <td>
                                        <div id="sexTip">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Delivery time:
                                    </td>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style1">
                                        First Name:
                                    </td>
                                    <td class="style2">
                                        <input type="text" name="firstname" size="41" maxlength="96" id="firstname" runat="server">
                                    </td>
                                    <td>
                                        <div id="firstnameTip">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style1">
                                        Last Name:
                                    </td>
                                    <td class="style2">
                                        <input type="text" name="lastname" size="41" maxlength="96" runat="server" id="lastname">
                                    </td>
                                    <td>
                                        <div id="lastnameTip">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style1">
                                        Street Address:
                                    </td>
                                    <td class="style2">
                                        <input type="text" name="street_address" size="41" maxlength="192" runat="server"
                                            id="street_address" runat="server">
                                    </td>
                                    <td>
                                        <div id="street_addressTip">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style1">
                                        City:
                                    </td>
                                    <td class="style2">
                                        <input type="text" name="city" size="41" maxlength="96" runat="server" id="city"
                                            runat="server">
                                    </td>
                                    <td>
                                        <div id="cityTip">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style1">
                                        Post/Zip:
                                    </td>
                                    <td class="style2">
                                        <input type="text" name="postcode" size="31" maxlength="30" runat="server" id="postcode">
                                    </td>
                                    <td>
                                        <div id="postcodeTip">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style1">
                                        Country:
                                    </td>
                                    <td class="style2">
                                        <select id="country" runat="server" style="width: 197px;">
                                            <option value="-1">Please Choose Your Country</option>
                                            <option value="Australia">Australia</option>
                                            <option value="Austria">Austria</option>
                                            <option value="Belgium">Belgium</option>
                                            <option value="CzechRepublic">Czech Republic</option>
                                            <option value="Denmark">Denmark</option>
                                            <option value="Finland">Finland</option>
                                            <option value="France">France</option>
                                            <option value="Germany">Germany</option>
                                            <option value="Guernsey">Guernsey</option>
                                            <option value="Hungary">Hungary</option>
                                            <option value="Iceland">Iceland</option>
                                            <option value="Ireland">Ireland</option>
                                            <option value="Italy">Italy</option>
                                            <option value="Jersey">Jersey</option>
                                            <option value="Luxembourg">Luxembourg</option>
                                            <option value="Netherlands">Netherlands</option>
                                            <option value="NewZealand">New Zealand</option>
                                            <option value="Poland">Poland</option>
                                            <option value="Portugal">Portugal</option>
                                            <option value="Slovakia">Slovakia</option>
                                            <option value="Spain">Spain</option>
                                            <option value="Sweden">Sweden</option>
                                            <option value="Switzerland">Switzerland</option>
                                        </select>
                                    </td>
                                    <td>
                                        <div id="countryTip">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style1">
                                        State/Province:
                                    </td>
                                    <td class="style2">
                                        <input type="text" name="state" value="" size="41" maxlength="96" runat="server"
                                            id="state">
                                    </td>
                                    <td>
                                        <div id="stateTip">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                        <fieldset style="clear: both;">
                            <p>
                                Contact Details</p>
                            <table align="left" cellpadding="0" cellspacing="0" style="line-height: 33px;">
                                <tr>
                                    <td class="style4">
                                        Email Address:
                                    </td>
                                    <td class="style3">
                                        <input type="text" name="email_address" size="41" maxlength="288" runat="server"
                                            id="email_address">
                                    </td>
                                    <td>
                                        <div id="email_addressTip">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="style4">
                                        Telephone:
                                    </td>
                                    <td class="style3">
                                        <input type="text" name="telephone" size="41" maxlength="96" runat="server" id="telephone">
                                    </td>
                                    </td>
                                    <td>
                                        <div id="telephoneTip">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                        Continue to Step 2
                        <br />
                        Order Review<br />
                        <input type="submit" value="Submit" class="submit" id="sbumit_First" />
                        </form>
                    </div>
                </div>
            </div>
            <div id="Second">
                <div id="1">
                    <div style="width: 49%; float: left">
                        <div class="cart_Two">
                            <h2>
                                Billing Address:
                            </h2>
                            <div class="__content">
                                <div id="CursMst" class="CursMst">
                                    <%=CursMsg %>
                                </div>
                                <br />
                                <strong>Your billing address is shown to the top. The billing address should match the
                                    address on your credit card statement. You can change the billing address by clicking
                                    the Change Address button.</strong><br />
                                <input type="button" value=" Edit " id="Edit" class="Edit" />
                                <div class="_Clare_">
                                </div>
                            </div>
                        </div>
                        <div class="cart_Two" style="clear: both;">
                            <h2>
                                Your Total</h2>
                            <div class="__content">
                                (Free Shipping):Free Shipping!<span class="price"> $0.00</span>
                                <div class="Coupon_Code">
                                </div>
                                Sub-Total: <span class="price">$<%=pro_price %></span>
                                <br />
                                Total: <span class="price order_total">$<%=pro_price %></span>
                                <div class="_Clare_">
                                </div>
                            </div>
                        </div>
                        <div class="cart_Two">
                            <h2>
                                FREE SHIPPING!</h2>
                            <div class="__content">
                                <input type="radio" value="Free Shipping Only" checked="checked" />Free Shipping
                                Only
                                <div class="_Clare_">
                                </div>
                            </div>
                        </div>
                        <div style="clear: left;">
                            Continue to Step 3
                            <br />
                            to confirm your order
                            <input type="button" value="Submit" class="submit" id="btn_Two" />
                        </div>
                    </div>
                    <div style="width: 49%; float: right;">
                        <div class="cart_Two">
                            <h2>
                                Discount Coupon</h2>
                            <div class="__content">
                                <br />
                                Please type your coupon code into the box next to Redemption Code. Your coupon will
                                be applied to the total and reflected in your cart after you click continue. Please
                                note: you may only use one coupon per order.<br />
                                Redemption Code: Redemption Code:<input type="text" class="txt_txt" id="txt_Coupon" />
                                <input type="button" value="Submit " id="Coupon" />
                                <div class="Coupon_msg">
                                </div>
                                <div class="_Clare_">
                                </div>
                            </div>
                        </div>
                        <div class="cart_Two">
                            <h2>
                                Special Instructions or Order Comments</h2>
                            <div class="__content">
                                <textarea type="text" value="Special Instructions or Comments About Your Order" rows="40"
                                    cols="90" class="textarea__" runat="server" id="txt_Msg" style="width: 350px;
                                    height: 150px;">
                    </textarea>
                                <div class="_Clare_">
                                </div>
                            </div>
                        </div>
                        <div class="cart_Two">
                            <h2>
                                Mode of payment</h2>
                            <div class="__content">
                                <p style="background: url(/images/CreditCart.jpg) no-repeat -30px 0px; width: 310px;
                                    height: 80px;">
                                </p>
                                <p style="background: url(/images/CreditCart.jpg) no-repeat -380px 0px; width: 310px;
                                    height: 80px;">
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="_Clare_" style="clear: right;">
                    </div>
                </div>
            </div>
            <div id="Third">
                <div id="2">
                    <div class="cart_Two" style="float: left;">
                        <h2>
                            Billing/Payment Information</h2>
                        <div class="__content">
                            <div class="CursMst">
                                <%=CursMsg %>
                            </div>
                            <br />
                            Payment Method:
                            <br />
                            Credit Card
                            <input type="button" value=" Edit " class="Edit" />
                            <div class="_Clare_">
                            </div>
                        </div>
                    </div>
                    <div class="cart_Two" style="float: right;">
                        <h2>
                            Delivery/Shipping Information</h2>
                        <div class="__content">
                            <div class="CursMst">
                                <%=CursMsg %>
                            </div>
                            <br />
                            Shipping Method:
                            <br />
                            FREE SHIPPING! (Free Shipping Only)
                            <input type="button" value=" Edit " id="Button3" class="Edit" />
                            <div class="_Clare_">
                            </div>
                        </div>
                    </div>
                    <div class="cart_Two" style="width: 890px; padding: 0px; clear: both;">
                        <h2>
                            Shopping Cart Contents</h2>
                        <div class="__content" style="padding: 0px;">
                            <div id="Cart_msg">
                                <table style="width: 100%;" cellpadding="10" cellspacing="0">
                                    <thead class="Cart_H">
                                        <tr>
                                            <th class="Cart_1">
                                                Qty
                                            </th>
                                            <th class="Cart_2">
                                                Item Name
                                            </th>
                                            <th class="Cart_3">
                                                Total
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="pro_Content">
                                        <%if (dt.Rows.Count > 0)
                                          {
                                              for (int i = 0; i < dt.Rows.Count; i++)
                                              {
                                        %>
                                        <tr>
                                            <td class="Cart_1">
                                                <%=nums[i]%>x
                                            </td>
                                            <td class="Cart_2">
                                                <div style="text-align: center;">
                                                    <div>
                                                        <strong>
                                                            <%=dt.Rows[i]["Pro_Name"]%></strong></div>
                                                    <div style="text-align: left; width: 354px; float: left; padding-left: 40px;">
                                                        <%=dt.Rows[i]["_attr"] %>
                                                    </div>
                                                    <div style="text-align: left; width: 133px; height: 106px; float: right;">
                                                        <img src="../ImageProducts/<%=dt.Rows[i]["Pro_Picture"].ToString().Split(',')[0] %>"
                                                            style="width: 100px; height: 100px; left: 782px;" />
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="Cart_3" style="width: 96px;">
                                                <%=dt.Rows[i]["Pro_Price"].ToString()%>*<%=nums[i]%><br />
                                                <span class="price">$<%=getProPrice(dt.Rows[i]["Pro_Price"].ToString(), nums[i])%></span>
                                            </td>
                                        </tr>
                                        <%}
                                          } %>
                                    </tbody>
                                </table>
                            </div>
                            <div>
                                <div style="float: left; width: 300px;">
                                    Order Complete
                                    <input type="button" id="order_sub" value="Submit" class="submit" />
                                    <div class="_Clare_">
                                    </div>
                                </div>
                                <div style="text-align: right; padding-right: 20px;">
                                    <div>
                                        Sub-Total:<span class="price" id="ActualPrice" runat="server"> 0.00</span>
                                    </div>
                                    <div>
                                        FREE SHIPPING! (Free Shipping Only):<span class="price"> $0.00</span>
                                    </div>
                                    <div class="Coupon_Code">
                                    </div>
                                    Total: <span class="price order_total">$<%=pro_price %></span>
                                    <div class="_Clare_">
                                    </div>
                                </div>
                                <div class="_Clare_">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <UserFooter:Footer ID="UserFooter" runat="server" />
    <UserToolbal:Toolbal ID="UserToolbal" runat="server" />
    </form>
</body>
</html>

<script src="Script/common/bRoundCurve-1.0.js" type="text/javascript"></script>

<script type="text/javascript">
    b_RoundCurve("cart_Two", "#dedede", "#ffffff", 3, "h2", "#eaeAEA");
</script>

